<template>
  <div class="search-container">
    <el-form ref="queryFormRef" :inline="true" :model="query" label-width="80" @submit.prevent>
      <el-form-item label="会话ID" prop="conversationId">
        <el-input
            v-model="query.conversationId"
            clearable
            placeholder="会话ID"
            @keyup.enter="props.loadData()"
        />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-select
            v-model="query.role"
            clearable
            placeholder="角色"
            @change="props.loadData()"
        >
          <el-option v-for="(value,key) in props.dictData['ai_role']" :label="value"
                     :value="key"/>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input
            v-model="query.content"
            clearable
            placeholder="内容"
            @keyup.enter="props.loadData()"
        />
      </el-form-item>
      <el-form-item label="发送时间" prop="sendTime">
        <el-input
            v-model="query.sendTime"
            clearable
            placeholder="发送时间"
            @keyup.enter="props.loadData()"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="props.loadData()">
          <template #icon>
            <search/>
          </template>
          搜索
        </el-button>
        <el-button plain type="primary" @click="props.resetQuery()">
          <template #icon>
            <refresh/>
          </template>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {AiMessagePageQuery} from "@/api/ai/manage/message/type";
import {DictType} from "@/api/system/dict-data/type";
import {FormInstance} from "element-plus";

// 组件定义
defineOptions({
  name: "AiMessageSearch",
  inheritAttrs: false,
});

// 组件 props & emits
const props = withDefaults(defineProps<{
  query: AiMessagePageQuery;
  dictData?: Record<DictType | string, Record<any, string>>;
  loadData: (callback?: () => void) => Promise<void>;
  resetQuery: (callback?: () => void) => Promise<void>;                  // 重置查询条件
}>(), {dictData: () => ({})});

const emits = defineEmits<{
  (event: "update:query", query: AiMessagePageQuery): void
}>()
// hooks
const query = useVModel(props, 'query', emits)
// 数据
const queryFormRef = ref<FormInstance | null>(null);         // 查询表单
// 方法

// 生命周期
</script>

<style lang="scss" scoped>
/* 样式 */
</style>
